
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="icon" href="favicon.ico"/>
	<title>个人博客</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/base.css" type="text/css">
	<style>
		@media only screen and (max-width:1024px){
			#music{
				right: 20px;
				bottom: 20%;
			}
		}
		p{
			text-indent: 0!important;
		}
	</style>
</head>
<body>
<div class="content">
	<div class=" container">
		<div id="music">
			<img src="images/music.png" alt="音乐">
			<audio id="myAudio" autoplay loop hidden="true">
				<source src="images/bm.mp3" type="audio/mpeg">
				<source src="media/bm.ogg" type="audio/ogg">
				Your browser does not support the audio element.
			</audio>
		</div>

		<div id="top">
			<img src="images/top.png" alt="回到顶部">
		</div>
		<div class="header-box">
			<img src="images/bg-02.jpg" alt="我的头像">
		</div>
		<div class="center">
			<p class="myid">RedSpite</p>
		</div>
		<div class="my-sort center">
			<a href="index.html">简历</a>
			<a href="drip.html">点滴</a>
		</div>
		<div id="artical">
			<div class="my-artical">
				<div class="articals">
					<div class="dotts"></div>
					<a class="my-date" href="javascritp:void(0);">
						<span class="trig"></span>
						<span class="dates">2017.07.04</span>
					</a>
					<div class="ar-container">
						<div class="my-line"></div>
						<div class="ar-content">
							<p class="art-title"><a href="javascritp:void(0);">好好学习，天天向上</a></p>
							<div class="col-md-6 col-xs-9 art-img">
								<img src="images/s12.jpg" alt="文章配图">
							</div>
							<div class="col-md-4 col-xs-10 art-detail">
								<p>初次建立个人网站建立和博客页面，很多不完善的地方，会慢慢提高~加油</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="my-artical">
			<div class="articals" style="min-height: 3em;">
				<div class="dotts"></div>
			</div>
		</div>
	</div>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script>
	$(document).ready(function () {

		//头像淡入
		$(".header-box").addClass("fadein");

		//回到顶部
		$("#top").click(function () {
			$('html,body').animate({
				scrollTop: 0
			}, 700);
		});
		showScroll();
		var min_height = document.documentElement.clientHeight /2;
		function showScroll() {
			$(window).scroll(function() {
				var s = $(window).scrollTop();
				s > min_height ? $('#top').fadeIn() : $('#top').fadeOut();
			});
		}

		//音乐关闭
		$("#music").bind("click", function () {
			$(this).toggleClass("pause");
			var audio = $("#music audio")[0];
			if(audio.paused){
				audio.play();//audio.play();// 这个就是播放
			}else{
				audio.pause();// 这个就是暂停
			}
		});
	});
</script>
<script>
	(function(){
		var bp = document.createElement('script');
		var curProtocol = window.location.protocol.split(':')[0];
		if (curProtocol === 'https') {
			bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
		}
		else {
			bp.src = 'http://push.zhanzhang.baidu.com/push.js';
		}
		var s = document.getElementsByTagName("script")[0];
		s.parentNode.insertBefore(bp, s);
	})();
</script>

</body>

</html>